<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>常用正则</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #app {
        padding-left: 20px;
      }

      /* 公共样式 */
      input {
        outline: none;
      }

      .prompt {
        color: #b9b9b5;
      }
      .success {
        color: #59a562;
      }
      .error {
        color: #d67463;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 1、全国座机正则表达式 -->
      <div class="landline-box">
        <h3>全国座机正则表达式</h3>
        <input type="text" v-model="landlineObj.value" @keyup.enter="handleLandlineVal" />
        <span class="prompt" ref="landPromptRef">{{ landlineObj.prompt }}</span>
      </div>

      <!-- 2、中国人姓名正则表达式 -->
      <div class="name-box" style="margin-top: 30px">
        <h3>中国人姓名正则表达式</h3>
        <input type="text" v-model="nameObj.value" @keyup.enter="handleNameVal" />
        <span class="prompt" ref="namePromptRef">{{ nameObj.prompt }}</span>
      </div>

      <!-- 3、身份证正则表达式 -->
      <div class="card-box" style="margin-top: 30px">
        <h3>身份证正则表达式</h3>
        <input type="text" v-model="cardObj.value" @keyup.enter="handleCardVal" />
        <span class="prompt" ref="cardPromptRef">{{ cardObj.prompt }}</span>
      </div>

      <!-- 4、手机号正则表达式 -->
      <div class="phone-box" style="margin-top: 30px">
        <h3>手机号正则表达式</h3>
        <input type="text" v-model="phoneObj.value" @keyup.enter="handlePhoneVal" />
        <span class="prompt" ref="phonePromptRef">{{ phoneObj.prompt }}</span>
      </div>

      <!-- 5、电子邮箱正则表达式 -->
      <div class="email-box" style="margin-top: 30px">
        <h3>电子邮箱正则表达式</h3>
        <input type="text" v-model="emailObj.value" @keyup.enter="handleEmailVal" />
        <span class="prompt" ref="emailPromptRef">{{ emailObj.prompt }}</span>
      </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          // 全国座机
          landlineObj: {
            value: '',
            prompt: '请输入座机'
          },

          // 中国人姓名
          nameObj: {
            value: '',
            prompt: '请输入姓名'
          },

          // 身份证
          cardObj: {
            value: '',
            prompt: '请输入身份证'
          },

          // 手机号
          phoneObj: {
            value: '',
            prompt: '请输入手机号'
          },

          // 电子邮箱
          emailObj: {
            value: '',
            prompt: '请输入电子邮箱'
          }
        },
        methods: {
          // 全国座机
          handleLandlineVal() {
            const reg = /^\d{3}-\d{8}$|^\d{4}-\d{7}$/;
            if (reg.test(this.landlineObj.value)) {
              this.landlineObj.prompt = '座机格式正确';
              this.$refs.landPromptRef.className = 'success';
            } else {
              this.landlineObj.prompt = '座机格式有误';
              this.$refs.landPromptRef.className = 'error';
            }
          },

          // 中国人姓名
          handleNameVal() {
            const reg = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/;
            if (reg.test(this.nameObj.value)) {
              this.nameObj.prompt = '姓名格式正确';
              this.$refs.namePromptRef.className = 'success';
            } else {
              this.nameObj.prompt = '姓名格式有误';
              this.$refs.namePromptRef.className = 'error';
            }
          },

          // 身份证
          handleCardVal() {
            const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
            if (reg.test(this.cardObj.value)) {
              this.cardObj.prompt = '身份证格式正确';
              this.$refs.cardPromptRef.className = 'success';
            } else {
              this.cardObj.prompt = '身份证格式有误';
              this.$refs.cardPromptRef.className = 'error';
            }
          },

          // 手机号
          handlePhoneVal() {
            const reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
            if (reg.test(this.phoneObj.value)) {
              this.phoneObj.prompt = '手机号格式正确';
              this.$refs.phonePromptRef.className = 'success';
            } else {
              this.phoneObj.prompt = '手机号格式有误';
              this.$refs.phonePromptRef.className = 'error';
            }
          },

          // 电子邮箱
          handleEmailVal() {
            const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if (reg.test(this.emailObj.value)) {
              this.emailObj.prompt = '电子邮箱格式正确';
              this.$refs.emailPromptRef.className = 'success';
            } else {
              this.emailObj.prompt = '电子邮箱格式有误';
              this.$refs.emailPromptRef.className = 'error';
            }
          }
        }
      });
    </script>
  </body>
</html>
